<template>
	<view class="flex-column" style="width: 100vw; margin-top: 15px;">
		<publish-item class="publish-item_amount" title="任务金额" unit="USDT" :value="taskAmount" requisite
			@inputEnd="taskAmountInputEnd"></publish-item>

		<view v-for="(item,index) in plans" :key="index" class="flex-column" style="width: 100vw;">
			<view class="flex-column flex-center font-16 font-weight-medium"
				style="background-color: #F7F9FD; width: 100%; height: 46px; padding-left: 16px; color: #313C56;">
				{{ $tools.toChinese(item.plan) }}期
			</view>
			<view class="flex-column" style="margin-left: 16px; margin-right: 16px;">
				<view class="flex-row flex-items-center font-14 font-weight-regular"
					style="color: #313C56; margin-top: 8px;">
					<image src="../../../static/xinghao.png" style="width: 8px; height: 8px; margin-right: 4px;">
					</image>
					<text>{{ `${$tools.toChinese(item.plan)}期百分比` }}</text>
				</view>
				<view class="flex-row flex-items-center" style="margin-top: 8px;">
					<uv-input v-model="item.rate" placeholder="请输入" placeholderStyle="color: #B7C0CA; font-size: 16px;"
						fontSize="16px" color="#313C56" border="none" disabled-color="white"
						customStyle="marginLeft: -4px; backgroundColor: rgba(255, 255, 255, 0)"
						@blur="planRateInputEnd(index)"></uv-input>
					<text class="font-14 font-weight-regular" style="color: #313C56;">%</text>
				</view>
				<view style="width: calc(100%); height: 1px; background-color: #F7F9FD; margin-top: 10px;">
				</view>
			</view>

			<view class="flex-column" style="margin-left: 16px; margin-right: 16px;">
				<view class="flex-row flex-items-center font-14 font-weight-regular"
					style="color: #313C56; margin-top: 8px;">
					<image src="../../../static/xinghao.png" style="width: 8px; height: 8px; margin-right: 4px;">
					</image>
					<text>{{ `${$tools.toChinese(item.plan)}期金额` }}</text>
				</view>
				<view class="flex-row flex-items-center" style="margin-top: 8px;">
					<uv-input v-model="item.amount" placeholder="请输入"
						placeholderStyle="color: #B7C0CA; font-size: 16px;" fontSize="16px" color="#313C56"
						border="none" disabled disabled-color="white"
						customStyle="marginLeft: -4px; backgroundColor: rgba(255, 255, 255, 0)"
						@blur="planAmountInputEnd(index)"></uv-input>
					<text class="font-14 font-weight-regular" style="color: #313C56;">USDT</text>
				</view>
				<view style="width: calc(100%); height: 1px; background-color: #F7F9FD; margin-top: 10px;">
				</view>
			</view>

			<view class="flex-column" style="margin-left: 16px; margin-right: 16px;" @click="openDatePicker(index)">
				<view class="flex-row flex-items-center font-14 font-weight-regular"
					style="color: #313C56; margin-top: 8px;">
					<image src="../../../static/xinghao.png" style="width: 8px; height: 8px; margin-right: 4px;">
					</image>
					<text>{{ `完成日期` }}</text>
				</view>
				<view class="flex-row flex-items-center" style="margin-top: 8px;">
					<uv-input v-model="item.endTime" placeholder="请选择"
						placeholderStyle="color: #B7C0CA; font-size: 16px;" fontSize="16px" color="#313C56"
						border="none" disabled disabled-color="white"
						customStyle="marginLeft: -4px; backgroundColor: rgba(255, 255, 255, 0)"></uv-input>
					<image src="../../../static/arrow-right.png" style="height: 16px; width: 16px;"></image>
				</view>
				<view style="width: calc(100%); height: 1px; background-color: #F7F9FD; margin-top: 10px;">
				</view>
			</view>
		</view>

		<view class="flex-row-center" style="height: 48px; width: 100%;" @click="addPlans">
			<image src="../../../static/addicon.png" style="width: 16px; height: 16px;"></image>
			<text class="font-16 font-weight-regular" style="color: #6B7885; margin-left: 8px;">增加期数</text>
		</view>
		<publish-item class="publish-item_amount" title="任务保证金" unit="USDT" touchDisabled :value="projectEarnest"
			requisite placeholder="自动计算"></publish-item>

	</view>
</template>

<script>
	import publishItem from "@/components/publish-item/publish-item.vue"
	export default {
		name: "task-amount",
		emits: ['openDatePicker', 'showPopup'],
		components: {
			publishItem
		},
		data() {
			return {
				taskAmount: '',
				projectEarnest: '',
				plans: []
			};
		},
		methods: {
			planRateInputEnd(index) {
				let plans = this.$uv.deepClone(this.plans)
				let value = plans[index].rate
				if (uni.$uv.test.digits(value)) {
					let rate = parseInt(value)
					if (rate > 0 && rate <= 100) {
						this.plans[index].rate = value
						this.plans[index].amount = (parseFloat(this.taskAmount) * (rate / 100)).toFixed(2)
					} else {
						this.plans[index].rate = ''
						this.plans[index].amount = ''
						this.$emit('showPopup', '任务百分比错误')
					}

				} else {
					this.plans[index].rate = ''
					this.plans[index].amount = ''
					this.$emit('showPopup', '任务百分比必须是整数')
				}
			},
			taskAmountInputEnd(value) {
				this.taskAmount = value
				if (!this.$uv.test.empty(value)) {
					this.projectEarnest = (parseFloat(this.taskAmount) * 0.1).toFixed(2)
				} else {
					this.projectEarnest = ''
				}
			},
			judgeNext() {
				let msg = this.judgeLastPlan()
				if (this.$uv.test.empty(this.taskAmount)) {
					return '请输入任务金额'
				} else if (this.plans.length == 0) {
					return '请增加期数'
				} else if (msg.length != 0) {
					return msg
				} else if (!this.judgeRate()) {
					return '总百分比不等于100%'
				} else if (this.$uv.test.empty(this.projectEarnest)) {
					return '请输入任务保证金'
				} else {
					return ''
				}

			},
			judgeRate() {
				let sumRate = 0
				for (var i = 0; i < this.plans.length; i++) {
					sumRate += parseInt(this.plans[i].rate)
				}
				return sumRate == 100
			},
			getParams() {
				const params = {
					totalAmount: this.taskAmount,
					projectEarnest: this.projectEarnest,
					plans: JSON.stringify(this.plans)
				}
				return params
			},
			judgeLastPlan() {
				let msg = ''
				if (this.plans.length != 0) {
					const lastPlan = this.plans[this.plans.length - 1]
					// let msg = ''
					if (lastPlan.rate.length == 0) {
						msg = `第${this.$tools.toChinese(lastPlan.plan)}期任务未填写百分比`
					} else if (lastPlan.amount.length == 0) {
						msg = `第${this.$tools.toChinese(lastPlan.plan)}期任务未填写任务金额`
					} else if (lastPlan.endTime.length == 0) {
						msg = `第${this.$tools.toChinese(lastPlan.plan)}期任务未填写完成日期`
					}
				}
				return msg
			},
			addPlans() {
				if (this.plans.length != 0) {
					let msg = this.judgeLastPlan()
					if (msg.length != 0) {
						this.$emit('showPopup', msg)
						return
					}
				}

				this.$nextTick(function() {
					const plan = {
						plan: this.plans.length + 1,
						amount: '',
						rate: '',
						endTime: ''
					}
					this.plans.push(plan)
				})
			},
			openDatePicker(index) {
				this.$emit('openDatePicker', {
					index: index
				})
			},
			confirmPlanDate(val, e) {
				console.log(val, e)
				this.plans[e.index].endTime = val
			}
		}
	}
</script>

<style>
	.publish-item_amount {
		margin-left: 16px;
		margin-right: 16px;
	}
</style>